<template>
  <div class="conatic">
    <ul class="function">
      <li @click="defaults" :class="flag == 0 ? 'act' : ''">默认排序</li>
      <li @click="asc" :class="flag == 1 ? 'act' : ''">
        升序<i class="iconfont icon-ln_jiantoushang"></i>
      </li>
      <li @click="desc" :class="flag == 2 ? 'act' : ''">
        降序<i class="iconfont icon-ln_jiantouxia"></i>
      </li>
      <li>筛选<i class="iconfont icon-shaixuan_o"></i></li>
    </ul>
    <!-- 刷新 -->
    <van-pull-refresh
      v-model="isLoading"
      :head-height="120"
      @refresh="onRefreshs"
      pull-distance
    >
      <van-pull-refresh v-model="refreshing">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          offset="10"
          :immediate-check="false"
        >
          <div class="vanCard">
            <van-card
              v-for="item in list"
              :key="item.id"
              :num="item.stock"
              :price="item.price"
              :desc="item.subtitle"
              :title="item.name"
              :thumb="item.imageHost + item.mainImage"
              :origin-price="item.originalPrice"
              @click="urlJump(item.id)"
            />
          </div>
        </van-list>
      </van-pull-refresh>
      <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
      <template #pulling="props">
        <img
          class="doge"
          src="https://img01.yzcdn.cn/vant/doge.png"
          :style="{ transform: `scale(${props.distance})` }"
        />
      </template>
      <!-- 释放提示 -->
      <template #loosing>
        <img class="doge" src="https://img01.yzcdn.cn/vant/doge.png" />
      </template>
      <!-- 加载提示 -->
      <template #loading>
        <img class="doge" src="https://img01.yzcdn.cn/vant/doge-fire.jpg" />
      </template>
    </van-pull-refresh>
  </div>
</template>

<script>
import { productList } from "../../../api/index";
export default {
  data() {
    return {
      flag: 0,
      categoryIdint: this.$route.query.categoryId,
      // 默认default，升序price_asc,降序price_desc
      orderBy: "default", // 排序规则
      pageNum: 1, // 当前是第几页数据，
      pageSize: 5, // 每次请求多少条数据
      list: [], // 存放数据的数组
      // 下拉刷新
      isLoading: false,
      // 上拉刷新
      loading: false, // 是否在加载中
      // 定义是否 关闭上拉刷新
      finished: false,
      refreshing: false,
    };
  },
  methods: {
    // 上拉回调
    onLoad() {
      console.log(1);
      setTimeout(() => {
        console.log(2);
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }
        this.pageSize += 5;
        this.loading = true;
        // 回调数据请求
        this.fetchProductlist();
      }, 2000);
    },
    // 下拉回调
    onRefreshs() {
      setTimeout(() => {
        this.isLoading = false;
        if (this.pageNum < 5) {
          this.pageNum++;
        } else {
          this.pageNum = 1;
        }
        this.fetchProductlist();
      }, 3000);
    },
    // 数据请求
    fetchProductlist() {
      const params = {
        categoryId: this.categoryId,
        orderBy: this.orderBy,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      productList(params).then((res) => {
        this.list = res.list;
        this.loading = false;
        // 渲染数组大于 20 则关闭上拉刷新
        if (this.list.length >= 20) {
          this.finished = true;
        }
      });
    },
    urlJump(id) {
      this.$router.push("/Details?" + "id=" + id);
    },
    // 改变排序方式
    defaults() {
      this.orderBy = "default";
      this.fetchProductlist();
      this.flag = 0;
    },
    asc() {
      this.orderBy = "price_asc";
      this.fetchProductlist();
      this.flag = 1;
    },
    desc() {
      this.orderBy = "price_desc";
      this.fetchProductlist();
      this.flag = 2;
    },
  },
  created() {
    this.fetchProductlist();
  },
};
</script>

<style lang="scss" scoped>
.conatic {
  margin-top: 80px;
  .function {
    position: fixed;
    // top: 100px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid #ccc;
    background-color: white;
    z-index: 99999;
    li {
      flex: 1;
      height: 70px;
      font-size: 25px;
      text-align: center;
      line-height: 70px;
      i {
        font-size: 30px;
        margin-left: 15px;
        color: #ccc;
      }
    }
  }
}
.act {
  color: red;
}
.vanCard {
  padding-top: 80px;
}
// 下拉提示

.doge {
  width: 140px;
  height: 74px;
  margin-top: 100px;
  border-radius: 4px;
  margin-bottom: 0;
}
</style>